import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../services/screebAdapter.dart';
import '../controllers/search_controller.dart';
import '../../../services/searchServices.dart';

class SearchView extends GetView<SearchController> {
  const SearchView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromRGBO(233, 233, 233, 1),
      appBar: AppBar(
        centerTitle: true,
        actions: [
          TextButton(
              onPressed: () {
                // 保存搜索记录
                SearchServices.setHistoryData(controller.keyWords);
                // 跳转路由传参
                Get.offAndToNamed('/product-list',
                    arguments: {"keyWords": controller.keyWords});
              },
              child: Text(
                '搜索',
                style: TextStyle(
                    fontSize: ScreenAdapter.fontSize(36),
                    color: Colors.black54),
              ))
        ],
        title: Container(
          width: ScreenAdapter.width(840),
          height: ScreenAdapter.height(100),
          decoration: BoxDecoration(
              color: const Color.fromARGB(230, 252, 243, 236),
              borderRadius: BorderRadiusDirectional.circular(50)),
          child: TextField(
            onChanged: (value) {
              controller.keyWords = value;
            },
            // 监听键盘的回车事件
            onSubmitted: (value) {
              // 保存搜索记录
              SearchServices.setHistoryData(value);
              // 跳转路由传参
              Get.offAndToNamed('/product-list',
                  arguments: {"keyWords": value});
            },
            style: TextStyle(fontSize: ScreenAdapter.fontSize(36)),
            autofocus: true,
            decoration: InputDecoration(
                prefixIcon: const Icon(Icons.search),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(30),
                    borderSide: BorderSide.none)),
          ),
        ),
      ),
      body: ListView(
        padding: EdgeInsets.all(ScreenAdapter.width(20)),
        children: [
          Obx(() => controller.historyList.isNotEmpty
              ? Padding(
                  padding: EdgeInsets.only(bottom: ScreenAdapter.height(40)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '搜索历史',
                        style: TextStyle(
                            fontSize: ScreenAdapter.fontSize(42),
                            fontWeight: FontWeight.bold),
                      ),
                      IconButton(
                          onPressed: () {
                            // 清空搜索历史
                            Get.defaultDialog(
                                title: '确定要删除吗',
                                confirm: ElevatedButton(
                                    onPressed: () {
                                      controller.clearHistoryData();
                                      Get.back();
                                    },
                                    child: const Text('确认')),
                                cancel: ElevatedButton(
                                    onPressed: () {
                                      Get.back();
                                    },
                                    child: const Text('取消')));
                          },
                          icon: const Icon(Icons.delete))
                    ],
                  ),
                )
              : const Text('')),
          Obx(() => Wrap(
                children: controller.historyList
                    .map((value) => GestureDetector(
                          onLongPress: () {
                            Get.defaultDialog(
                                title: '确定要删除吗',
                                confirm: ElevatedButton(
                                    onPressed: () {
                                      controller.deleteHistoryData(value);
                                      Get.back();
                                    },
                                    child: const Text('确认')),
                                cancel: ElevatedButton(
                                    onPressed: () {
                                      Get.back();
                                    },
                                    child: const Text('取消')));
                          },
                          child: Container(
                            padding: EdgeInsets.all(ScreenAdapter.width(16)),
                            margin: EdgeInsets.all(ScreenAdapter.width(16)),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(10)),
                            child: Text(value),
                          ),
                        ))
                    .toList(),
              )),
          Padding(
            padding: EdgeInsets.only(bottom: ScreenAdapter.height(20)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '猜你想搜',
                  style: TextStyle(
                      fontSize: ScreenAdapter.fontSize(42),
                      fontWeight: FontWeight.bold),
                ),
                const Icon(Icons.refresh)
              ],
            ),
          ),
          Wrap(
            children: [
              Container(
                padding: EdgeInsets.all(ScreenAdapter.width(16)),
                margin: EdgeInsets.all(ScreenAdapter.width(16)),
                child: const Text('手机'),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10)),
              )
            ],
          ),

          // 热销商品
          Container(
            margin: EdgeInsets.only(top: ScreenAdapter.height(20)),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.white),
            child: Column(
              children: [
                Container(
                  width: double.infinity,
                  height: ScreenAdapter.height(138),
                  decoration: const BoxDecoration(
                      image: DecorationImage(
                          fit: BoxFit.cover,
                          image: AssetImage("assets/images/hot_search.png"))),
                  child: Image.asset('name'),
                ),
                SizedBox(
                  child: GridView.builder(
                    shrinkWrap: true,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        crossAxisSpacing: ScreenAdapter.width(40),
                        mainAxisExtent: ScreenAdapter.height(20),
                        childAspectRatio: 3 / 1),
                    itemCount: 8,
                    itemBuilder: (BuildContext context, int index) {
                      return Row(
                        children: [
                          Container(
                            width: ScreenAdapter.width(120),
                            alignment: Alignment.center,
                            padding: EdgeInsets.all(ScreenAdapter.width(10)),
                            child: Image.network(
                              'https://www.itying.com/images/shouji.png',
                              fit: BoxFit.fitHeight,
                            ),
                          ),
                          Expanded(
                              flex: 1,
                              child: Container(
                                alignment: Alignment.topLeft,
                                child: const Text('小米净化器 热水器 小米净化器'),
                              ))
                        ],
                      );
                    },
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
